{% extends "base-full.html" %}

{% block content %}
<div class="container">
    <form method="post" class="needs-validation" action="/registerDo" novalidate>
    {% csrf_token %}
    <div class="row g-3 container-fluid">
        <div class="col text-center container-fluid m-3">
            <h3>注册新用户</h3>
        </div>
    </div>
    <div class="row m-3 justify-content-center">
        <div class="col-1 text-end">
            <label for="username" class="form-label">用户名</label>
        </div>
        <div class="col-auto">
            <input type="text" class="form-control" id="username" name="username" placeholder="用户名" value="" required>
        </div>
        <div class="col-auto">
            <span id="usernameHelp" class="form-text">
                Must be 8-20 characters long.
            </span>
        </div>
    </div>
    <div class="row m-3 justify-content-center">
        <div class="col-1 text-end">
            <label for="email" class="form-label">邮箱</label>
        </div>
        <div class="col-auto">
            <input type="text" class="form-control" name="email" placeholder="邮箱" value="" required/> 
        </div>
        <div class="col-auto">
            <span id="emailHelp" class="form-text">
                Must be 8-20 characters long.
            </span>
        </div>
    </div>
    <div class="row m-3 justify-content-center">
        <div class="col-1 text-end">
            <label for="password" class="form-label">密码</label>
        </div>
        <div class="col-auto">
            <input type="password" class="form-control" name="password" placeholder="密码" value="" required/> 
        </div>
        <div class="col-auto">
            <span id="passwordHelp" class="form-text">
                Must be 8-20 characters long.
            </span>
        </div>
    </div>
    <div class="row m-3 justify-content-center">
        <div class="col-1 text-end">
            <label for="repassword" class="form-label">确认密码</label>
        </div>
        <div class="col-auto">
            <input type="password" class="form-control" name="repassword" placeholder="确认密码" value="" required/> 
        </div>
        <div class="col-auto">
            <span id="repasswordHelp" class="form-text">
                Must be 8-20 characters long.
            </span>
        </div>
    </div>
    <div class="row m-3 justify-content-center">
        <div class="col-auto text-center">
            <input type="submit" value="注册"/>
            <input type="reset" value="取消"/>
        </div>
    </div>
    </form>
</div>
{% endblock %}
{% block kaifascript %}
<script>
(() => {
  'use strict'

  // Fetch all the forms we want to apply custom Bootstrap validation styles to
  const forms = document.querySelectorAll('.needs-validation')

  // Loop over them and prevent submission
  Array.from(forms).forEach(form => {
    form.addEventListener('submit', event => {
      if (!form.checkValidity()) {
        event.preventDefault()
        event.stopPropagation()
      }

      var username = document.querySelector('#username')
      if(username.value.length < 8) {
        alert(username.value)
      }
      //var email = document.querySelectorAll('#email')[0]
      //if(email.value.length < 8 || email.value.length > 20  || email.value.indexOf('@') == -1) {
      //  email.setCustomValidity('邮箱长度不能小于8或者大于20或者没有@')
      //}
      //var password = document.querySelectorAll('#password')[0]
      //if(password.value.length < 8  || password.value.length > 20) {
      //  password.setCustomValidity('密码长度不能小于8或者大于20')
      //}
      form.classList.add('was-validated')
      //return true;
    }, false)
  })
})()
</script>
{% endblock %}